<script setup lang="ts">
import FinanciaBar from '@/components/Echart/Bar/FinanciaBar.vue'
import { reactive, computed, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useFinanceStore } from '@/stores/module/finance'
import {
  DEFAULT_ECHARTS_FONTSIZE,
  DIALOG_ECHARTS_FONTSIZE,
} from '@/Utils/setting'
import { useDialogStore } from '@/stores/dialog'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore

const fontSize = dialogInfo.visible
  ? DIALOG_ECHARTS_FONTSIZE
  : DEFAULT_ECHARTS_FONTSIZE
const dialogInfoVisible = dialogInfo.visible
const financeStore = useFinanceStore() // 创建store实例
const { getVariableExpensesByRegionMonth }: any = storeToRefs(financeStore)
// 调整px到合适的大小
const changePixelSize = (px: number) => {
  // 获取当前屏幕宽度
  const width = document.body.clientWidth
  let res = (px / 1920) * width
  // 保留整数
  return parseInt(res.toFixed(0))
}
const legendData = []
const itemStyles = ['#4153D3', '#8AF6E1', '#FADD69', '#E067E3', '#CC5F30']
const series = computed(() =>
  getVariableExpensesByRegionMonth.value.info?.map((item, index) => {
    legendData.push(item.name)
    return {
      name: item.name,
      type: 'bar',
      stack: '总量',
      barWidth: changePixelSize(23),
      data: item.value,
      itemStyle: {
        color: itemStyles[index],
      },
    }
  })
)
//echarts配置项
const chartData = computed(() => {
  return {
    name: 'AreaExpenditureComparison',

    stack: 'total',
    legend: {
      top: '2%',
      data: legendData,
      itemWidth: changePixelSize(10),
      itemHeight: changePixelSize(10),
      textStyle: {
        fontSize: changePixelSize(fontSize),

        color: '#fff',
      },
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '5%',
      top: '15%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: getVariableExpensesByRegionMonth.value.sub_titles,
      axisTick: {
        show: false, // 关闭刻度线
      },
      axisLine: {
        show: false, // 关闭轴线
      },
      axisLabel: {
        color: '#fff', // 设置 X 轴标签字体颜色
        fontSize: changePixelSize(fontSize),
        interval: 0, // 强制显示所有标签
        margin: changePixelSize(5), // 调整标签与轴线的距离
        formatter:
          dialogInfoVisible == false
            ? function (str: any) {
                // 中文算2,英文算1,数到maxLength截取,然后打...
                let count = 0
                let result = ''

                for (let i = 0; i < str.length; i++) {
                  const char = str.charAt(i)
                  count += /[\u4E00-\u9FA5]/g.test(char) ? 2 : 1

                  if (count > 8) {
                    result += '...'
                    break
                  }

                  result += char
                }
                return result
              }
            : function (str: any) {
                // 中文算2,英文算1,数到maxLength截取,然后打...
                let count = 0
                let result = ''

                for (let i = 0; i < str.length; i++) {
                  const char = str.charAt(i)
                  count += /[\u4E00-\u9FA5]/g.test(char) ? 1 : 1

                  if (count > 8) {
                    result += '...'
                    break
                  }

                  result += char
                }
                return result
              },
      },
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false, // 关闭刻度线
      },
      axisLine: {
        show: false, // 关闭轴线
      },
      splitLine: {
        lineStyle: {
          color: '#123545', // 分割线颜色为灰色
        },
      },
      axisLabel: {
        fontSize: changePixelSize(fontSize),
        color: '#08ffff',
        margin: changePixelSize(5), // 调整标签与轴线的距离
      },
    },
    dataZoom: [
      {
        type: 'inside',
        show: false,
        xAxisIndex: [0],
        zoomOnMouseWheel: false, // 禁止鼠标滚轮缩放
        moveOnMouseWheel: true, // 开启鼠标滚轮窗口平移
        moveOnMouseMove: true, // 开启鼠标移动窗口平移
        start: 0,
        end:
          getVariableExpensesByRegionMonth.value.sub_titles.length > 4
            ? ~~(
                (4 / getVariableExpensesByRegionMonth.value.sub_titles.length) *
                100
              )
            : 100,
        showDataShadow: false,
        textStyle: {
          color: '#ccd7d7',
        },
      },
    ],
    series: series.value,
    // [
    //   {
    //     name: '成本',
    //     type: 'bar',
    //     stack: '总量',
    //     barWidth: changePixelSize(23),
    //     data: [320, 302, 301, 334, 390],
    //     itemStyle: {
    //       color: '#4153D3',
    //     },
    //   },
    //   {
    //     name: '经销商工资',
    //     type: 'bar',
    //     stack: '总量',
    //     barWidth: changePixelSize(23),
    //     data: [120, 132, 101, 134, 90],
    //     itemStyle: {
    //       color: '#8AF6E1',
    //     },
    //   },
    //   {
    //     name: '代办费',
    //     type: 'bar',
    //     stack: '总量',
    //     barWidth: changePixelSize(23),
    //     data: [220, 182, 191, 234, 290],
    //     itemStyle: {
    //       color: '#FADD69',
    //     },
    //   },
    //   {
    //     name: '税费',
    //     type: 'bar',
    //     stack: '总量',
    //     barWidth: changePixelSize(23),
    //     data: [150, 212, 201, 154, 190],
    //     itemStyle: {
    //       color: '#E067E3',
    //     },
    //   },
    //   {
    //     name: '促销费',
    //     type: 'bar',
    //     stack: '总量',
    //     barWidth: changePixelSize(23),
    //     data: [820, 832, 901, 934, 1290],
    //     itemStyle: {
    //       color: '#CC5F30',
    //     },
    //   },
    // ],
  }
})
watch(
  () => getVariableExpensesByRegionMonth.value,
  () => {
    chartData.value.series = series.value
    chartData.value.legend.data = legendData
    chartData.value.xAxis.data =
      getVariableExpensesByRegionMonth.value.sub_titles
  },
  { deep: true }
)
</script>
<template>
  <card-box componentName="AreaExpenditureComparison">
    <template v-slot:title v-if="getVariableExpensesByRegionMonth.title">
      <h1
        :class="{
          subtitle: dialogInfoVisible,
        }"
      >
        {{ getVariableExpensesByRegionMonth.title }}
      </h1>
    </template>
    <FinanciaBar
      :chart-data="chartData"
      v-if="getVariableExpensesByRegionMonth.info.length"
    />
    <div v-else class="default-img">
      <p>{{ $t('bi_common_nodata') }}</p>
    </div>
  </card-box>
</template>
<style lang="scss" scoped>
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;

  font-size: 16px;
  color: #00f6ff;
}
.subtitle {
  font-size: 30px;
}
</style>
